<template>
  <div class="chat-box">

      <ul class="chat-list">
          <li class="me">
              <p>啊哈哈哈哈</p>
          </li>

          <li class="me" v-for="(item , index ) in list" :key="index">
              <transition name="slide">
                    <p>{{item}}</p>
               </transition>
          </li>
      </ul>
      <div class="bottom-wrap full-container" :class="{focus:(isFocus && 0<text.length )}">
        <input type="text" class="auto" @focus="isFocus=true" @blur="isFocus=false" v-model="text" v-on:keyup.enter="send">
        <div class="const">
            <i-button class="primary radius" @click.native="send">发送</i-button>
        </div>
      </div>
  </div>
</template>

<script>
import Vue from "vue";
import gzs from "./lib/gzs/gzs.js";
Vue.use(gzs);

export default {
    name:"chat",
    data:function(){
        return {
            isFocus:false,
            text:"",
            list:[]
        }
    },
    methods:{
        send:function(){
            // Vue.set(th)
            console.log("1");
            this.list.push(this.text);
            this.text="";
        }
    }

}
</script>

<style lang="less">
body{
    background-color: #f8f8f8;
}
    .chat-box{
        width: 100%;
        max-width:500px;
        height: 500px;
        box-shadow:0px 3px 9px rgba(0,0,0,0.22);
        background-color: white;
        border-radius:4px;
        margin: 33.33vh auto;
        overflow: hidden;
        position: relative;

        .bottom-wrap{
            width: ~"calc(100% + 64px + 8px)";
            padding: 8px;
            box-sizing: border-box;
             transition: width .3s;
            position: absolute;
            bottom: 0px;
            left: 0px;

            input{
                transition: width .3s;
            }

            &.focus{
               width: 100%;
            }
            
            .button{
                margin: 0px;
            }
        }
    }

    .chat-list{
         padding: 0px;
         overflow: hidden;
         li{
             width:100%;
            list-style: none;
              &.me{
                // float: right;
                text-align: right;
            }
         }
        p{
            background-color: rgba(52, 133, 255, 0.8);
            font-size: 16px;
            line-height: 1.2em;
            color: white;
            padding: 0px;
            border-radius: 18px;
            padding: 0.4em 1em;
            margin: 10px;
            display: inline-block;

        }
    }

    .slide-enter{
        // position:
        right: -100%;
    }
</style>

